import { createHookConfig, DisposableCollection,  } from '@antv/xflow'
import { NODE_KEY, POINT_NODE_KEY } from '../Flow/constants'
import { AlgoNode, PointNode } from '../Flow/node'
import { Shape } from '@antv/x6'
import type { Edge } from '@antv/x6'

const TEMP_EGDE = 'flowchart-connecting-edge'
export namespace NsAddEdgeEvent {
  export const EVENT_NAME = 'ADD_FLOWCHART_EDGE_CMD_EVENT'
  export interface IArgs {
    targetPortId: string
    sourcePortId: string
    source: string
    target: string
    edge: Edge
    tempEdgeId?: string
  }
}

const XFlowEdge = Shape.Edge.registry.register(
  'xflow',
  Shape.Edge.define({
    zIndex: 1,
    highlight: true,
    name: TEMP_EGDE,
    label: '',
    anchor: {
      name: 'midSide',
      args: {
        dx: 10,
      },
    },
    attrs: {
      line: {
        stroke: '#A2B1C3',
        targetMarker: {
          name: 'block',
          width: 12,
          height: 8,
        },
        // strokeDasharray: '5 5',
        strokeWidth: 1,
      },
    },
    data: {
      label: '',
    },
  }),
  true,
)


const graphConfig = {
  grid: false,
  resizing: false,
  connecting: {
    // createEdge() {
    //   const tempEdge = new XFlowEdge({})
    //   this.once('edge:connected', args => {
    //     const { edge, isNew } = args
    //     /** 没有edge:connected时，会导致graph.once的事件没有执行 */
    //     if (isNew && edge && edge.isEdge() && tempEdge === edge) {
    //       const targetNode = edge.getTargetCell()
    //       if (targetNode && targetNode.isNode()) {
    //         const targetPortId = edge.getTargetPortId()
    //         const sourcePortId = edge.getSourcePortId()
    //         const sourceCellId = edge.getSourceCellId()
    //         const targetCellId = edge.getTargetCellId()
    //         this.trigger(NsAddEdgeEvent.EVENT_NAME, {
    //           targetPortId,
    //           sourcePortId,
    //           source: sourceCellId,
    //           target: targetCellId,
    //           edge: edge,
    //           tempEdgeId: tempEdge.id,
    //         } as NsAddEdgeEvent.IArgs)
    //       }
    //     }
    //   })
    //   return tempEdge
    // },
  }
}

export const useGraphHookConfig = createHookConfig((config, proxy) => {
  // 获取 Props
  // const props = proxy.getValue()
  // console.log('get main props', props)
  config.setRegisterHook(hooks => {
    const disposableList = [
      // 注册增加 react Node Render
      hooks.reactNodeRender.registerHook({
        name: 'react node render',
        handler: async renderMap => {
          renderMap.set(NODE_KEY, AlgoNode)
          renderMap.set(POINT_NODE_KEY, PointNode)
        }
      }),
      hooks.graphOptions.registerHook({
        name: 'xflow-options',
        handler: async args => {
          console.log(args)
          // Object.assign(args, graphConfig)
          args.connecting = { ...args.connecting, ...graphConfig.connecting }

        }
      })
    ]
    const toDispose = new DisposableCollection()
    toDispose.pushAll(disposableList)
    return toDispose
  })
})

// export const useGraphConfig = createGraphConfig(config => {
//   /** 设置XFlow画布配置项 */
//   config.setX6Config({
//     /** 画布网格 */
//     grid: {
//       visible: true,
//     },
//     /** 画布缩放等级 */
//     scaling: {
//       min: 0.2,
//       max: 3,
//     },
//     /** 画布滚轮缩放 */
//     // mousewheel: {
//     //   enabled: true,
//     //   /** 将鼠标位置作为中心缩放 */
//     //   zoomAtMousePosition: true,
//     // },
//   })

//   /** 设置XFlow画布需要渲染的React节点/边 */
//   config.setNodeRender(NODE_KEY, props => <AlgoNode {...props} />)
//   config.setNodeRender(POINT_NODE_KEY, props => <PointNode {...props} />)

//   // config.setNodeRender('NODE2', Node2)
//   // config.setEdgeRender('EDGE1', props => <Edge1 {...props} />)
//   // config.setEdgeRender('EDGE2', props => <Edge2 {...props} />)

// })
